ক্যানভাস (Canvas) কি?
এইচটিএমএল ক্যানভাস একটি গ্রাফিক্যাল এলিমেন্ট, যা ওয়েব পেজে ডাইনামিক গ্রাফিক্স এবং অ্যানিমেশন তৈরির জন্য ব্যবহৃত হয়। এটি <canvas> ট্যাগের মাধ্যমে সংজ্ঞায়িত করা হয়। ক্যানভাস ব্যবহার করে ছবি আঁকা, আকার তৈরি, এবং ডেটা ভিজুয়ালাইজেশন করার জন্য JavaScript ব্যবহার করা হয়।
ক্যানভাস (Canvas) এর বৈশিষ্ট্য
- গ্রাফিক্স রেন্ডারিং: ২D এবং ৩D গ্রাফিক্স তৈরি করা যায়।
- JavaScript ভিত্তিক: ড্রইং এবং অ্যানিমেশন তৈরির জন্য JavaScript প্রয়োজন।
- পিক্সেল-বেসড গ্রাফিক্স: ক্যানভাস ট্যাগ পিক্সেল ভিত্তিক গ্রাফিক্স রেন্ডার করে।
- রেস্পন্সিভ: ক্যানভাস ব্যবহার করে স্ক্রিন রেজল্যুশন অনুযায়ী আকার পরিবর্তন করা যায়।
ক্যানভাস ট্যাগ এর গঠন
ক্যানভাস ট্যাগ একটি সাধারণ HTML ট্যাগ, যার মাধ্যমে একটি নির্দিষ্ট আকারের গ্রাফিক্স এলাকা তৈরি করা হয়।
<canvas id="myCanvas" width="500" height="400"></canvas>
উপরে:
id: ক্যানভাস চিহ্নিত করার জন্য ব্যবহৃত হয়।width: ক্যানভাসের প্রস্থ নির্ধারণ করে।height: ক্যানভাসের উচ্চতা নির্ধারণ করে।
উদাহরণ: ক্যানভাসে ছবি আঁকা
HTML কোড:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ক্যানভাস উদাহরণ</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400" style="border:1px solid #000;"></canvas>
<script>
// ক্যানভাসের জন্য কন্টেক্সট সেটআপ
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// আয়তক্ষেত্র আঁকা
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 200, 100);
// বৃত্ত আঁকা
ctx.beginPath();
ctx.arc(300, 200, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill();
</script>
</body>
</html>
কিভাবে কাজ করে:
- ক্যানভাস আইডি: JavaScript এর মাধ্যমে
getContext('2d')পদ্ধতি ব্যবহার করে ক্যানভাসে ড্রইং কন্টেক্সট তৈরি করা হয়। - ড্রইং মেথড:
fillRect()এবংarc()মেথড ব্যবহার করে বিভিন্ন আকার আঁকা হয়।
ক্যানভাসের সাধারণ মেথডসমূহ
আয়তক্ষেত্র আঁকার মেথড
fillRect(x, y, width, height): একটি পূর্ণ আয়তক্ষেত্র আঁকে।strokeRect(x, y, width, height): কেবল আউটলাইন আঁকে।clearRect(x, y, width, height): একটি নির্দিষ্ট এলাকাকে সাফ করে।
পথ (Path) তৈরি
beginPath(): একটি নতুন পথ শুরু করে।moveTo(x, y): নতুন পজিশনে পাথ সেট করে।lineTo(x, y): একটি সরল রেখা যোগ করে।
রঙ এবং স্টাইল
fillStyle: রঙ বা গ্রেডিয়েন্ট সেট করে।strokeStyle: রেখার রঙ সেট করে।lineWidth: রেখার প্রস্থ নির্ধারণ করে।
ক্যানভাসের সুবিধা এবং সীমাবদ্ধতা
সুবিধা
- ডাইনামিক গ্রাফিক্স এবং অ্যানিমেশন তৈরি করা সহজ।
- জাভাস্ক্রিপ্ট দিয়ে নিয়ন্ত্রিত।
- ব্রাউজারের রেসপন্সিভ ডেভেলপমেন্টে কার্যকর।
সীমাবদ্ধতা
- ক্যানভাসে তৈরি গ্রাফিক্স পিক্সেল ভিত্তিক, তাই রেজল্যুশন স্কেলিংয়ে কিছুটা অসুবিধা হতে পারে।
- শুধুমাত্র JavaScript ব্যবহার করে কাজ করতে হয়।
বাস্তব ক্ষেত্রে ব্যবহার
- ডাটা ভিজুয়ালাইজেশন (যেমন চার্ট বা গ্রাফ তৈরি)।
- গেম ডেভেলপমেন্ট।
- অ্যানিমেশন এবং ইন্টারঅ্যাক্টিভ ডিজাইন।
Content added By
Read more
